<template>
  <div class='outer'>
    <Tab title='美食'>
      <template #content>
      <img width="200" height="200" src=''/>
      </template>
      <template #footer>
        <h1>1111</h1>
      </template>
    </Tab>
    <Tab title='电影'>
      <template #content>
        <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
      </template>
      <template #footer>
        <h1>2222</h1>
      </template>
    </Tab>
    <Tab>
      <ol>
        <li>a</li>
        <li>a</li>
        <li>a</li>
      </ol>
    </Tab>
  </div>
</template>

<script>
import Tab from "./components/Tab.vue";
export default {
  name: "App",
  components: {
    Tab,
  },
  data() {
    return {
      tabData:[]
    };
  },
};
</script>

<style>
.outer{
  display: flex;
  justify-content: space-around;
  background: palegreen;
}
</style>